<template>
  <div class="app-container">

    <el-collapse v-model="activeNames">
      <el-collapse-item title="添加课程" name="1">
        <el-form label-width="120px">
          <el-form-item label="Excel模版实例">
            <el-tag>
              <i class="el-icon-download"/>
              <a :href="'/static/test.xlsx'">点击下载模版</a>
            </el-tag>

          </el-form-item>

          <el-form-item label="选择Excel">
            <el-upload
              ref="upload"
              :auto-upload="false"
              :on-success="fileUploadSuccess"
              :on-error="fileUploadError"
              :on-change="fileChange"
              :on-remove="fileChange"
              :disabled="importBtnDisabled"
              :limit="1"
              :action="BASE_API+'/eduSubject/addSubject'"
              name="file"
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button
                :loading="loading"
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload">上传到服务器</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-collapse-item>
      <el-collapse-item title="课程列表" name="2">
        <el-input v-model="filterText" placeholder="请输入搜索关键字" style="margin-bottom:30px;" />

        <el-tree
          ref="tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          class="filter-tree"
          default-expand-all
        />
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>

  import subject from '@/api/subject'

  export default {

    data() {
      return {
        BASE_API: process.env.BASE_API, // 接口API地址
        importBtnDisabled: false, // 按钮是否禁用
        loading: false,

        filterText: '',
        data: [],
        defaultProps: {
          children: 'children',
          label: 'title'
        },

        // 激活折叠面板
        activeNames: ['2']
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    created() {
      this.selectAllSubjects();
    },
    methods: {
      // 文件提交方法
      submitUpload() {
        // 首先判断是否选中文件
        let file=document.getElementsByName("file")[0].value;
        // 未选中文件
        if(!file) {
          this.$message({
            type: 'info',
            message: "未选中任何文件",
          });
          return ;
        }
        this.importBtnDisabled=true;
        this.loading=true;
        // 提交表单
        this.$refs.upload.submit();
      },
      // 文件提交成功方法
      fileUploadSuccess(res) {
        // 关闭加载动画
        this.loading=false;
        // 恢复提交按钮
        this.importBtnDisabled=false;
        // 重新加载数据
        this.selectAllSubjects();
        // 信息提示
        this.$message({
          type: 'success',
          message: res.message,
        });
      },
      // 文件提交失败方法
      fileUploadError(res) {
        // 关闭加载动画
        this.loading=false;
        // 恢复提交按钮
        this.importBtnDisabled=false;
        // 信息提示
        this.$message.error(res.message);
      },
      fileChange(file, fileList) {
        if(fileList.length==0) {
          // 将file的值置为空
          document.getElementsByName("file")[0].value="";
          // 关闭加载动画
          this.loading=false;
        }
      },

      // 获取课程信息
      selectAllSubjects() {
        subject.selectAllSubjects()
          .then(res => {
            this.data=res.data.subject;
          })
          .catch(res => {
            this.$message.error(res.message);
          });
      },
      // 课程信息检索
      filterNode(value, data) {
        if (!value) return true
        return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
      }
    }
  }
</script>
